import React, {useState} from 'react';
import { Form } from '@ant-design/compatible';
import {Modal, Alert, Button } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import { useToggle, useBoolean, useRequest  } from '@umijs/hooks';
import { queryHdInfo } from '../service';

// 自写组件
import Title from './Title/Title'
import FlightInfoForm from './FlightInfoForm/FlightInfoForm'
import HdInfoForm from './HdInfoForm/HdInfoForm'

// 组件样式
import '@ant-design/compatible/assets/index.css';
import styles from './index.less'

const CreateForm = props => {
  const { stateF, setFalse} = props;

  // 控制弹窗标题更改
  const { state: modalTitle, setLeft, setRight } = useToggle('请输入航班信息', '请选择航段');

  // 航班信息 或者 航段信息更改
  const { state: contentTitle, setLeft: setLeftContentTitle, setRight: setRightContentTitle } = useToggle('航班信息', '航段信息');

  // 必填项提示 或 无数据时提示
  const { state: tip, setLeft: setLeftTip, setRight: setRightTip } = useToggle('请填写航班号', '暂无此航班数据');
  const { state: hDTip, setRight: setRightHDTip } = useToggle('可勾选单一航段或多航段', '请选择航段');

  // 控制 航班内容 或者 航段内容展示
  const { state: contentShow, setTrue, setFalse:setFalseShow } = useBoolean(true);

  // 初始化 航班日期 和 航班号
  const [flightDate, bindFlightDate] = useState(moment());
  const [flightNo, bindFlightNumber] = useState('');

  // 初始化航段数据
  const [hDs, handleHDS] = useState([]);

  // 控制航段选择情况
  const [hdSelect, handleHDSelect] = useState([]);


  // 控制步骤
  const [step, controlStep] = useState(1);

  // 获取航段数据
  const {loading, run } = useRequest((params) => queryHdInfo(params), {
    manual: true,
    onSuccess: (result) => {
      if (!result.length) {
        setRightTip();
      } else {
        setRight();
        setRightContentTitle();
        setFalseShow();
        handleHDS(result)
        controlStep(step+1);
      }
    }
  });

  // 下一步的逻辑
  const okHandle = () => {
    let flightD = moment(flightDate).format('YYYY/MM/DD');
    let flighN = `3U${flightNo}`;
    switch(step) {
      case 1:
        if (flightDate && flightNo) {
          run({flightDate: flightD, flightNo: flighN});
        }
        break;
      case 2:
        if (hdSelect.length) {
          let flightInfo = {flightD, flighN, hData: hdSelect.join(",")}
          router.push({
            pathname: '/compensation/indemnityForm',
            state: {
              type: 'add',
              flightInfo: flightInfo
            }
          })
        } else {
          setRightHDTip();
        }
        break;
      default:
        break;
    }
  };

  // 关闭弹唱恢复原始数据
  const handleHideModal = () => {
    setFalse();
    setLeft();
    setLeftContentTitle();
    setTrue();
    setLeftTip();
    bindFlightDate(moment());
    bindFlightNumber('');
    controlStep(1);
    handleHDS([]);
    handleHDSelect([]);
    // handleHdCheckbox([]);
  }

  return (
    <Modal
      destroyOnClose={true}
      width={380}
      title={[
        <div key="title" style={{textAlign: "center"}}>{modalTitle}</div>
      ]}
      visible={stateF}
      onCancel={() => {handleHideModal()}}
      footer={[
        <div key="footer" className={styles.textAlign}>
          <Button loading={loading} key="next" type="primary" onClick={okHandle}>下一步</Button>
          <Button key="close" onClick={() => {handleHideModal()}}>取消</Button>
        </div>
      ]}
    >
      {/* {
        contentShow ? (<Alert message={tip} type="warning" />) : (<Alert message={hDTip} type="warning" />)
      } */}
      <Title title={contentTitle} />
      {
        contentShow ? (<FlightInfoForm {...{flightDate, flightNo, bindFlightDate, bindFlightNumber}} />)
      : (<HdInfoForm {...{hdSelect, handleHDSelect, hDs}} />)}
    </Modal>);
};

export default Form.create()(CreateForm);
